<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<style>
		#div1 {
			width: 100px;
			height: 100px;
			background-color: pink;
		}

		.div2 {
			width: 100px;
			height: 100px;
			background-color: purple;
		}

		.div3 {
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		.div4 {
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
	<body>
		<!-- onclick是一个事件属性 -->
		<div id="div1" onclick="this.innerHTML = 'hello'"></div>
		<!-- <div id="div2" class="div2" onclick="myFunction()"></div> -->
		<!-- <div id="div2" class="div2" onclick="myFunction1(this, event)"></div> -->
		<!-- <div id="div2" class="div2" onclick="myFunction2(this)"></div> -->
		<!-- <div id="div2" class="div2" onclick="myFunction3(this)"></div> -->
		<div id="div3" class="div3"></div>
		<div id="div4" class="div4"></div>
		<script>
			/*
			当用户点击鼠标时
			当网页加载后
			当图像加载后
			当鼠标移至元素上时
			当输入字段被改变时
			当 HTML 表单被提交时
			当用户敲击按键时
			*/

		function myFunction() {
			let div2 = document.getElementById("div2");
			div2.innerHTML = "hello";
		}

		function myFunction1(t, e) {
			console.log(t); //this 点击的当前元素
			console.log(this); // window
			t.innerHTML = "hello";
		}


		let myFunction2 = function (t) {
			console.log(t); //this 点击的当前元素
			console.log(this); // window
			t.innerHTML = "hello";
		}


		let myFunction3 =  (t) => {
			console.log(t); //this 点击的当前元素
			console.log(this); // window
			t.innerHTML = "hello";
		}
		let div3 = document.getElementById("div3");

		// event事件对象，是调用后，浏览器自动传递到该函数中
		// div3.onclick = function (event) {
		div3.onclick = function (e) {
			console.log(e.target);
			let div = e.target;
			div.innerHTML = "hello";
		}

		// 事件侦听
		//(1)获取要侦听的元素
		let div4 = document.getElementById("div4");
		/*
		第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
		第二个参数是当事件发生时我们需要调用的函数。
		第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
		*/
		div4.addEventListener("click", (e) => {
			// div4.innerHTML = "hello";
			e.target.innerHTML = "hello";
		})

		// 事件侦听的特点
		/*
		addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
		addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。(利用的是方法的第三个参数)
		removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
		*/
		div4.addEventListener("click", (e) => {
			alert("dianji");
		})



		</script>
	</body>
</html>